<template>
  <div class="base-wrapper__item" :class="size === 'large' ? 'large' : ''" :style="{ width: getWidth }">
    <div class="item__label item__label--deep-blue" v-if="labelType === 'deep-blue'" :class="[required ? 'required' : '']">{{ title }}：</div>
    <div class="item__label" :class="[required ? 'required' : '']" v-else>{{ title }}：</div>
    <slot>
      <span class="item__value item__value--blue" v-if="type === 'blue'" :title="value"> {{ value }}</span>
      <span class="item__value item__value--deep-blue" v-else-if="type === 'deep-blue'" :title="value"> {{ value }}</span>
      <span class="item__value item__value--bold" v-else-if="type === 'bold'" :title="value"> {{ value }}</span>
      <span class="item__value item__value--red" v-else-if="type === 'red'" :title="value"> {{ value }}</span>
      <template v-else-if="type === 'unit'">
        <span class="item__value item__value--red">{{ value }}</span>
        <span class="item__value item__value--unit">{{ unit }}</span>
      </template>
      <span class="item__value" v-else :title="value"> {{ value }}</span>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'OrderBaseItem',
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: [String,Number],
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    labelType: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    width: {
      type: [Number, String],
      default: '25%'
    },
    unit: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    getWidth() {
      if (this.width.includes('%') || this.width === 'auto') {
        return this.width
      } else {
        return `${this.width}px`
      }
    }
  }
}
</script>
<style lang="scss">
.base-wrapper__item {
  font-size: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;

  .required {
    position: relative;
    text-indent: 4px;

    &::before {
      content: '*';
      color: #ff4656;
      position: absolute;
      top: 0;
      left: -4px;
      font-size: 12px;
    }
  }

  &.large {
    width: 576px;
  }

  .item__label {
    color: #5a6f82;
    // overflow: hidden;
    white-space: nowrap;

    &--deep-blue {
      color: #418cbd;
    }
  }

  .item__value {
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &--blue {
      color: #3d82ea;
    }

    &--deep-blue {
      color: #418cbd;
    }

    &--bold {
      font-weight: bold;
    }

    &--red {
      color: #ff4656;
    }

    &--unit {
      margin-left: 4px;
    }
  }
}
</style>
